#dialogue {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100vh;

    #head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 10px;
        height: 50px;
        top: 0;
        width: 100vw;
        font-size: 30px;

        h3 {
            font-size: 25px;
            display: flex;
            align-items: center;
        }
    }

    #content {
        flex: 1;
        box-sizing: border-box;
        // display: flex;
        // flex-direction: column;
        // justify-content: flex-end;
        overflow-y: scroll;
        padding: 15px 10px 5px 10px;

        dl {
            margin: 10px 0;

            div {
                width: 100%;
                display: flex;

                dd {
                    padding: 15px 10px 10px 10px;
                    margin: 0 5px;
                    border-radius: 4px;

                    .date{
                        width: 100%;
                        margin-top: 10px;
                        text-align: right;
                    }
                }
            }


        }


        .right {
            justify-content: flex-end;

            dd {
                background-color: #f7e1ec;
            }
        }

        .left {
            justify-content: flex-start;

            dd {
                background-color: #f0f0f0;
            }
        }
    }

    #bottom {
        bottom: 0;
        height: 80px;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 -2px 50px rgba(0, 0, 0, 0.2);
        font-size: 30px;

        .rv-input__control {
            border-radius: 20px;
            height: 30px;
            box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.2);
            padding-left: 10px;
            font-size: 14px;
        }
    }
}